.search-bar {
  .form-control {
    background-color: variable('background');
    border-color: variable('background');
    color: variable('secondary-text-on-surface');
    padding-left: 2rem;

    &:focus {
      color: variable('primary-text-on-surface');
      box-shadow: none;
    }
  }

  .btn-search {
    background-color: transparent !important;
    box-shadow: none;
  }
}

.top-app-bar {
  @include elevation(4);

  .actions {
    .dropdown-menu {
      min-width: auto;
    }
  }
}

.top-app-bar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: $navbar-nav-link-padding-x;
            padding-left: $navbar-nav-link-padding-x;
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }
      }
    }
  }
}

.navbar-settings {
  @include media-breakpoint-up(lg) {
    order: 5;
  }
}

.navbar-social-share {
  @include media-breakpoint-up(lg) {
    order: 4;
  }
}

.setting {
  margin-bottom: 1rem;

  &.actions {
    .action {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0.25rem 0.5rem;
      text-align: center;

      .action-icon {
        padding: 0.75rem;
        background-color: var(--hbs-background);
        color: var(--hbs-primary-text-on-background);
        margin-bottom: 0.25rem;
      }

      &:hover {
        text-decoration: none;
      }
    }
  }
}
